<template>
  <div class="home">
    <Nav @changeShowAll="changeShowAll"></Nav>
    <div class="main" id="main">
      <!--今日推荐-->
      <div class="m_content m_today_box" v-show="showAll||tab==1">
        <div id="m_today">
          <div class="m-hot-tit clearfix">
            <div class="m-hot-tit-left"><span>今日推荐</span></div>
            <a>
              <div class="m-hot-tit-right"><span>更多推荐 ></span></div>
            </a>
          </div>
          <div class="mdd_today_box clearfix">
            <div class="m_today_center clearfix">
              <!--循环遍历-->
              <div class="goods-box2 " v-for="(good, index) in todayList" :key="index">
                <div class="goods clearfix">
                  <a @click="findGoodInfo(good.id)">
                    <div class="img-box">
                      <img :src="$baseUrl + good.cover.slice(2)">
                    </div>
                  </a>
                  <div class="goods-right">
                    <a @click="findGoodInfo(good.id)">
                      <p class="goodsname">{{ good.name }}</p>
                    </a>
                    <p class="goods-descript">{{ good.intro }}</p>
                    <p class="goods-spec">{{ good.spec }}</p>
                    <p class="goodsprices">
                      <span class="yj">&yen;<span class="yjcont">{{ good.price }}</span></span>
                    </p>
                    <p class="addcart" :data-id="index"><i class="iconfont icon-gouwuche3">
                      </i>加入购物车</p>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
      <!--热销排行-->
      <!-- 排名前三个热销商品 -->
      <div class="m_content mdd-top" v-show="showAll||tab==2">
        <div id="m_hot">
          <div class="m-hot-tit clearfix">
            <div class="m-hot-tit-left"><span>热销排行</span></div>
            <a>
              <div class="m-hot-tit-right"><span>更多热销 ></span></div>
            </a>
          </div>
          <div class="m_hot_one clearfix">
            <div class="goods-box1" v-for="(good, index) in hotList" v-if="index < 3" :key="index">
              <div class="goods clearfix">
                <div class="m-pm" style="background-image: url(img/m_top_1.png)"></div>
                <a @click="findGoodInfo(good.id)">
                  <div class="img-box">
                    <img :src="$baseUrl + good.cover.slice(2)">
                  </div>
                </a>
                <div class="goods-right">
                  <a @click="findGoodInfo(good.id)">
                    <p class="goodsname">{{ good.name }}</p>
                  </a>
                  <p class="goods-descript">{{ good.intro }}</p>
                  <p class="goods-spec">{{ good.spec }}</p>
                  <p class="goodsprices"><span class="yj">&yen;<span class="yjcont">{{ good.price }}</span></span></p>
                  <p class="addcart" :data-id="index"><i class="iconfont icon-gouwuche3"></i>加入购物车</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 排名第四-八的热销商品 -->
          <div class="m_hot_two clearfix">
            <div class="goods-box" v-for="(good, index) in hotList" :key="index" style="margin-bottom: 10px;">
              <div class="goods clearfix">
                <div class="m-pm"><span>8</span></div>
                <a @click="findGoodInfo(good.id)">
                  <div class="img-box">
                    <img :src="$baseUrl + good.cover.slice(2)">
                  </div>
                </a>
                <div class="goods-right">
                  <a @click="findGoodInfo(good.id)">
                    <p class="goodsname">{{ good.name }}</p>
                  </a>
                  <p class="goods-descript">{{ good.intro }}</p>
                  <p class="goods-spec">{{ good.spec }}</p>
                  <p class="goodsprices"><span class="yj">&yen;<span class="yjcont">{{ good.price }}</span></span></p>
                  <p class="addcart" :data-id="index"><i class="iconfont icon-gouwuche3"></i>加入购物车</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--产品分类-->
      <div v-show="showAll||tab==0">
        <div class="main Louti vegetable" v-for="(goodList, keyType) in goodsList" :key="keyType">
        <div class="m-hot-tit clearfix">
          <div class="m-hot-tit-left"><span>{{ getType(keyType).name }}</span></div>
          <a @click="findTypeList(keyType.id)">
            <div class="m-hot-tit-right">查看更多 ></div>
          </a>
        </div>
        <div class="main-box">
          <div class="m-swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="goods-box " v-for="(good, index) in goodList" v-if="index < 5" :key="index">
                  <div class="goods">
                    <a @click="findGoodInfo(good.id)">
                      <div class="img-box">
                        <img :src="$baseUrl + good.cover.slice(2)">
                      </div>
                    </a>
                    <a @click="findGoodInfo(good.id)">
                      <p class="goodsname">{{ good.name }}</p>
                    </a>
                    <p class="goods-descript">{{ good.intro }}</p>
                    <p class="goods-spec">{{ good.spec }}</p>
                    <p class="goodsprices"><del><span class="yj">&yen;
                          <span class="yjcont">{{ good.price }}</span></span></del></p>
                    <p class="addcart" :data-id="index"><i class="iconfont icon-gouwuche3">
                      </i>加入购物车</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
        </div>
      </div>
      </div>

      <!-- <CategoryList :goodsList="cateList"></CategoryList> -->

    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { getAllGoods, getHotGoods, getIndexGoods } from '@/request/goods.js'
import Nav from '@/components/Nav.vue'
export default {
  name: 'Home',
  components: {
    Nav
  },
  watch:{
    tab:{
      handler(val){
        
      }
    },
  },
  data() {
    return {
      Tindex:0,
      tab:0,
      showAll:true,
      /*今日推荐数据*/
      todayList: null,
      /*热销排行数据*/
      hotList: null,
      /*类别和商品信息*/
      goodsList: null,
      /*商品信息的url*/
      goodInfoUrl: null,
      /*类型信息的Url*/
      typeUrl: null,
      cateList: null
    }
  },
  created() {
    getAllGoods().then(res => {
      this.todayList = res.data.records;
    })
    getHotGoods().then(res => {
      this.hotList = res.data.records;
    })
    getIndexGoods().then(res => {
      this.goodsList = JSON.parse(res.data);
    })
    
  },
  methods: {
    changeShowAll(value){
      this.showAll = value
    },
    findGoodInfo(id) {
      this.$router.push({path:'/goodsDetail',query:{id}})
    },
    findTypeList(tid) {
      
    },
    /*解析类型字符串*/
    getType(type) {
      return eval('(' + type + ')')
    }
  },
}
</script>

<style scoped>
@import url('@/assets/css/index.css');
</style>
